<template>
  <div>
    发现
    <!-- 底部导航栏 -->
    <mt-tabbar v-model="selected_bottom" fixed>
      <mt-tab-item id="home">
        <img v-if="selected_bottom=='home'" src="../assets/homefill.png" slot="icon">
        <img v-else src="../assets/home.png" slot="icon">
        首页
      </mt-tab-item>
      <mt-tab-item id="video">
        <img v-if="selected_bottom=='video'" src="../assets/recordfill.png" slot="icon">
        <img v-else src="../assets/record.png" slot="icon">
        视频号
      </mt-tab-item>
      <mt-tab-item id="found">
        <img v-if="selected_bottom=='found'" src="../assets/samefill.png" slot="icon">
        <img v-else src="../assets/same.png" slot="icon">
        发现
      </mt-tab-item>
      <mt-tab-item id="community">
        <img v-if="selected_bottom=='community'" src="../assets/communityfill.png" slot="icon">
        <img v-else src="../assets/community.png" slot="icon">
        消息
      </mt-tab-item>
      <mt-tab-item id="people">
        <img v-if="selected_bottom=='people'" src="../assets/peoplefill.png" slot="icon">
        <img v-else src="../assets/people.png" slot="icon">
        我
      </mt-tab-item>
    </mt-tabbar> 
  </div>
</template>
<script>
export default {
  data() {
    return {
      selected_bottom:"found"
    }
  },
  watch: {
    // 页面跳转
    selected_bottom(newval){
      if(newval=="home"){
        this.$router.push('/');
      }else if(newval=="video"){
        this.$router.push('/video');
      }else if(newval=="found"){
        this.$router.push('/found');
      }else if(newval=="community"){
        this.$router.push('/community');
      }else if(newval=="people"){
        this.$router.push('/people');
      }
    }
  }
}
</script>
<style scoped>
/* 底部选项卡 */
.mint-tabbar>.mint-tab-item.is-selected{
  color: #2C3E50;
}
</style>